<template>
  <view>
    <uni-segmented-control :current="current" :values="timeSlotTexts" @clickItem="switchTimeSlot"/>
    <view v-for="(slot,slotIndex) in timeSlots" :key="slotIndex">
      <view v-show="slot===timeSlot">
        <view style="margin-top: 10px"/>
        <uni-datetime-picker v-model="date" @change="dateChange" type="date" :end="endDate"/>
        <view style="margin-top: 15px;margin-bottom: 15px">
          <text style="margin-left: 15px;font-size: 14px" class="color-success" v-if="normalNum > 0">正常：{{normalNum}}人</text>
          <text style="margin-left: 15px;font-size: 14px" class="color-primary" v-if="leaveNum > 0">请假：{{leaveNum}}人</text>
          <text style="margin-left: 15px;font-size: 14px" class="color-warning" v-if="lateNum > 0">迟到：{{lateNum}}人</text>
          <text style="margin-left: 15px;font-size: 14px" class="color-error" v-if="absenceNum > 0">缺勤：{{absenceNum}}人</text>
        </view>
        <uni-list>
          <uni-list-item v-for="(item,index) in list" :key="index"
                         :title="(index+1)+' '+item.studentName">
            <template v-slot:footer>
              <view style="display: flex">
                <uni-badge type="error" text="缺勤" size="normal" style="align-self: center;" :custom-style="{fontSize: '13px'}" v-if="item.attenceStatus===null"/>
                <uni-badge type="success" text="正常" size="normal" style="align-self: center;" :custom-style="{fontSize: '13px'}" v-if="item.attenceStatus==='1'"/>
                <uni-badge type="warning" text="迟到" size="normal" style="align-self: center;" :custom-style="{fontSize: '13px'}" v-if="item.attenceStatus==='2'"/>
                <uni-badge type="primary" text="请假" size="normal" style="align-self: center;" :custom-style="{fontSize: '13px'}" v-if="item.attenceStatus==='3'"/>
              </view>
            </template>
          </uni-list-item>
          <template v-slot:header v-if="isEmpty(list)">
            <image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode="aspectFit" style="width: 100%; height: 600px;"></image>
          </template>
        </uni-list>
      </view>
    </view>
  </view>
</template>

<script>
import UniSegmentedControl
  from "../../../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue";
import UniList from "../../../uni_modules/uni-list/components/uni-list/uni-list.vue";
import UniListItem from "../../../uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
import UniDatetimePicker
  from "../../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";

export default {
  name: "classAttendanceInfo",
  components: {UniDatetimePicker, UniListItem, UniList, UniSegmentedControl},

  data(){
    return {
      current: 0,
      timeSlotTexts: [],
      timeSlots: [],
      timeSlot: null,
      classId: null,
      list: [],
      date: this.todayStr(),
      endDate: null,
      normalNum: 0,
      leaveNum: 0,
      lateNum: 0,
      absenceNum: 0,
    }
  },
  onLoad(options){
    this.showLoadingByQuery();
    this.classId = options.classId;
    this.$api.classManage.getClassRuleTimeSlots(this.classId).then(res => {
      this.timeSlots = res.data.map(item=>item.timeSlot);
      this.timeSlotTexts = res.data.map(item=>item.timeSlotText);
      this.timeSlot = this.timeSlots[0] || null;
      this.getList();
    });
  },
  onShow(){
    this.endDate = this.todayStr();
  },
  methods: {
    dateChange(){
      this.getList();
    },
    switchTimeSlot(e){
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
        this.timeSlot = this.timeSlots[this.current];
        this.getList();
      }
    },
    getList(){
      this.showLoadingByQuery();
      if(!this.timeSlot){
        this.toast("获取不到班级考勤规则");
        this.goBack(1000);
        return;
      }
      this.$api.teacher.tecClassAttence(this.date, this.timeSlot, this.classId).then(res => {
        this.hideLoading();
        this.list = res.data;
        this.absenceNum = this.normalNum = this.leaveNum = this.lateNum = 0;
        this.list.forEach(item=>{
          if(item.attenceStatus === null){
            this.absenceNum++;
          }else if(item.attenceStatus === '1'){
            this.normalNum++;
          }else if(item.attenceStatus === '2'){
            this.lateNum++;
          }else if(item.attenceStatus === '3'){
            this.leaveNum++;
          }
        })
      }).catch(()=>{
        this.hideLoading();
      });
    }
  }
}

</script>

<style scoped>
</style>
